<template>
	<view class="page">
		<view class="row">
			<view class="label">
				充值账号:
			</view>
			<view class="text">
				{{cardSn}}
			</view>
		</view>
		<view class="row">
			<view class="label">
				最后一次充值时间:
			</view>
			<view class="text red">
				{{countMoneyObj.lastDate}}
			</view>
		</view>
		<view class="money red">
			￥{{countMoneyObj.accountBalance | handledMoney}} <text>余额</text>
		</view>
		
		<view class="selectMoneyArr">
			<view :class="selectMoney==item ? 'selectItem item' : 'item'" v-for="(item,index) in moneyArr" 
			:key="index" @click="handleSelectMoney(item)">
				<text class="text">{{item}}</text>
			</view>
		</view>
		<view class="row" style="border-top: 2rpx solid #dcdcdc;">
			<view class="label">
				到账金额:
			</view>
			<view class="text" v-if="payType=='WECHAT'">
				{{selectMoney ?   (selectMoney * (1-wechatReate)).toFixed(2) : ''}}
			</view>
			<view class="text" v-if="payType=='ALI'">
				{{selectMoney ?   (selectMoney * (1-aliReate)).toFixed(2) : ''}}
			</view>
		</view>
		<view class="textTitle" style="margin-top: 20rpx;">
			支付方式
		</view>
		<view class="payType"  @click="payType='WECHAT'">
			<image style="width:60rpx;" :src="imgBaseUrl2+'weixinpay.png' " mode="widthFix"></image>
			<text>
				微信支付
			</text>
			<image v-if="payType=='WECHAT'" :src="imgBaseUrl2+'SelectUser.png' " mode="widthFix"></image>
		</view>
		<view class="payType" @click="payType='ALI'">
			<image style="width:60rpx;" src="@/static/images/zhifubao.png" mode="widthFix"></image>
			<text>
				支付宝支付
			</text>
			<image v-if="payType=='ALI'"   :src="imgBaseUrl2+'SelectUser.png' " mode="widthFix"></image>
		</view>
		<view class="btn" @click="handleTopup">
			<text>立即充值</text>
		</view>
		  <view style="background-color: #f0f0f0;margin: 30rpx auto;padding: 10rpx;border-radius: 30rpx;width: 90%;">
		    <view  class="bottomview">
		      <text>注意说明： 
		      </text>
		    </view>
		    <view  class="bottomview">
		     <text style="text-indent: 2em;">充值金额可用于食堂就餐及超市消费
		      </text>
		    </view>
		  </view>
	</view>
</template>

<script>
	import {h5countAmtApi,h5AliRechargeApi,h5WxRechargeApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				moneyArr:[
					20,50,100,200,300,0.01
				],
				selectMoney: '',
				countMoneyObj : {
					accountBalance : '0.00',
					lastDate : ''
				},
				cardSn : '',
				payType: 'WECHAT',
				bool : false,
				aliReate: 0,
				wechatReate: 0,
			}
		},
		methods: {
			getCountMoney(){
				return h5countAmtApi().then(res=>{
					this.countMoneyObj = res.data
					this.aliReate =  res.data.aliReate/100
					this.wechatReate =  res.data.wechatReate/100
				})
			},
			handleSelectMoney(item){
				this.selectMoney = item
			},
			handleTopup(){
				if(!this.selectMoney) return this.setMessage('请先选择充值金额')
				// return console.log(this.payType);
				if(this.bool) return
				this.bool = true
				if(this.payType=='ALI'){
					h5AliRechargeApi({
						rechargeamount : this.selectMoney,
						memberId : uni.getStorageSync('selectInfoAccount').id,
						channel: this.payType
					}).then(res=>{
						console.log(res);
						document.querySelector('body').innerHTML = res.payPage
						document.forms[0].submit()
					}).finally(()=>{
						this.bool = false
					})
				}else if(this.payType=='WECHAT'){
					h5WxRechargeApi({
						rechargeamount : this.selectMoney,
						memberId : uni.getStorageSync('selectInfoAccount').id,
						channel: this.payType
					}).then(res=>{
						console.log(res);
						let renderUrl = res.data.mweb_url
						window.location.href= renderUrl
						// window.open(url);
						// this.goPage('/pages/componentsB/topup/webview',{
						// 	renderUrl
						// })
					}).finally(()=>{
						this.bool = false
					})
				}
			
			},
		},
		onLoad() {
			let info = uni.getStorageSync('selectInfoAccount')
			this.cardSn = info.cardSn
		},
		onShow() {
			this.getCountMoney()
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #fff;
	height: 100vh;
	.text{
		color: #333;
	}
	.row{
		display: flex;
		align-items: center;
		height: 90rpx;
		border-bottom: 2rpx solid #dcdcdc;
		&:nth-child(1){
			border-top: 2rpx solid #dcdcdc;
		}
		.label{
			margin: 0 30rpx;
		}
	
	}
	.red{
		color: #fe415c;
	}
	.money{
		height: 100rpx;
		@include flexCenter;
		font-size: 36rpx;
		border-bottom: 2rpx solid #dcdcdc;
		text{
			font-size: 28rpx;
			color: #333;
			margin-left: 5rpx;
		}
	}
	.selectMoneyArr{
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 40rpx;
		justify-content: space-between;
		.item{
			width: 200rpx;
			height: 120rpx;
			@include flexCenter;
			font-size: 36rpx;
			border-radius: 10rpx;
			border: 2rpx solid #dcdcdc;
			margin: 5rpx;
		}
		.selectItem{
			border: 0;
			background: #2d8cf6;
			text{
				color: #ffffff !important;
			}
		}
	}
	.textTitle{
		font-size: 30rpx;
		padding-left: 50rpx;
		color: #000;
	}
	.payType{
		display: flex;
		align-items: center;
		height: 110rpx;
		padding: 0 50rpx;
		width: 100%;
		image{
			width: 50rpx;
		}
		text{
			color: #000;
			flex: 1;
			padding-left: 20rpx;
			white-space: nowrap;
			font-size: 30rpx;
		}
	}
	.btn{
		margin: 20rpx auto 0;
		background: #2d8cf6;
		@include flexCenter;
		width: 90vw;
		height: 92rpx;
		border-radius: 10rpx;
		text{
			color: #fff;
		}
	}
	
}

.bottomview{
  display: flex;
  font-size: 16px;
  font-family: sans-serif;
  color: #5a5745;
  box-sizing: border-box;
  padding: 10rpx;
}

</style>
